<template>
  <transition
    appear
    enter-active-class="transition duration-800 delay-0 ease-in"
    enter-from-class="opacity-0 transform translate-y-25"
    enter-to-class="opacity-100 transform-none"
  >
    <div
      class="main-header text-2xl text-light-50 font-bold pb-5 sticky top-0 left-0 z-11 bg-gradient-to-b from-themebg via-themebg"
    >Discover</div>
  </transition>

  <div class="main-blogs flex items-center">
    <transition
      appear
      enter-active-class="transition duration-800 delay-100 ease-in"
      enter-from-class="opacity-0 transform translate-y-25"
      enter-to-class="opacity-100 transform-none"
    >
      <div
        class="main-blog flex-col items-stretch relative overflow-hidden w-4/6 h-96 p-8 rounded-3xl bg-no-repeat bg-blog bg-blue-400 bg-auto"
      >
        <div
          class="main-blog__title max-w-48 mb-7 text-2xl font-semibold text-light-50"
        >How to do Basic Jumping and how to landing safely</div>
        <div class="main-blog__author flex items-center pb-2">
          <div class="author-img__wrapper relative flex-shrink-0">
            <span
              class="iconify absolute w-4 p-0 right-0 bottom-1 border-2 rounded-1/2 bg-light-50 text-blue-400 border-blue-400"
              data-icon="mdi:check-circle"
              data-inline="false"
            ></span>
            <img class="author-img w-14 h-14 rounded-1/2 border object-cover" :src="userphoto2" />
          </div>
          <div class="author-detail ml-4">
            <div class="author-name font-medium text-sm mt-2">Thomas Hope</div>
            <div class="author-info font-normal text-sm text-light-50">53K views</div>
          </div>
        </div>
        <div
          class="main-blog__time py-0.75 px-2 absolute right-5 bottom-5 rounded-md text-xs bg-gray-500 text-light-50"
        >7 min</div>
      </div>
    </transition>
  </div>
  <transition
    appear
    enter-active-class="transition duration-800 delay-300 ease-in"
    enter-from-class="opacity-0 transform translate-y-25"
    enter-to-class="opacity-100 transform-none"
  >
    <div class="small-header text-2xl font-medium text-light-50 mt-8 mb-5">Most Watched</div>
  </transition>
  <videos />
</template>

<script setup lang="ts">
import userphoto2 from "@renderer/assets/mock/user-photo-2.jpg";
import Videos from "@renderer/components/common/Videos.vue";

</script>


<style lang="scss" scoped>
</style>